<template>
  <div
    class="com-circle-type"
    :style="{
      width: radius+'px',
      height: radius+'px',
      'border-radius': parseInt(radius)/2 + 'px', background: color,
      left: pos[0],
      top: pos[1]
    }"
  >
    <div class="label">{{ label }}</div>
  </div>
</template>

<script>
export default {
  props: ["label", "color", "radius", "pos"]
};
</script>

<style lang="scss" scoped>
.com-circle-type {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  &:hover {
    opacity: 0.7;
  }
  cursor: pointer;
  .label {
    font-size: 12px;
    color: #fff;
    width: 50px;
  }
}
</style>
